<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图展示</title>
	<link rel="icon" href="../images/favicon.png" type="image/x-icon">
    
    <script src="https://webapi.amap.com/maps?v=2.0&key=6ee01182e8363350bc686acb8a4ad9ad&plugin=AMap.GraspRoad,AMap.Adaptor"></script>
	<link rel="stylesheet" href="../element/theme-default/index.css">
	<link rel="stylesheet" href="../css/playback.css"/>
    <script type="text/javascript" src="../js/map-gps-mongodb-operate.js?v=130" ></script>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/RangeSlider.js" ></script>
    <script src="../js/vue.js"></script>
	<script src="../js/prototype.js"></script>
    <script src="../element/index.js"></script>
    <style>
		.wrap{
			background-color: #F2F2F2;
			position: relative;
		}
		#container{
			position: absolute;
			top:0;
			left: 0;
			right: 4.4rem;
			z-index: 10;
			width: auto;
			height: auto;
		}
		.wrap_right{
			position: absolute;
			top:0;
			bottom: 0;
			right:0;
			z-index: 100;
			width: 4.4rem;
			overflow-y: auto;
		}
		.form_box2, .control_box2{
			width: 4rem;
			background: #FFFFFF;
			box-shadow: 0px 2px 4px 0px rgb(223 223 223 / 50%);
			border-radius: 6px;
			border: 1px solid #ECECEC;
			padding:0.16rem 0.2rem;
			margin-left:0.2rem;
			margin-top: 0.15rem;
		}
		.el-form-item__label{
			color:#606266;
			font-size: 12px;
		}
		.btn_group{
			padding: 0;
			margin-top:10px;
			display: block;
		}
		.map_hint{
			font-size: 12px;
		}
		.map_hint li{
			line-height: 2;
			width: 100%;
			display: flex;
			align-items: center;
		}
		.hint_point b{
			width: 16px;
			height: 16px;
			background-color: #f16747;
			border-radius: 10px;
			margin-right: 0.2rem;
		}
		.hint_action b{
			background-color: #ede321;
		}
		.hint_delete b{
			background-color: #ede321;
			opacity: 0.5;
		}
		.hint_base b{
			background-color: #2ad636;
		}
		.hint_line b{
			width: 30px;
			height: 6px;
			background-color: #1BAC2E;
			border-radius: 3px;
			margin-right: 0.2rem;
		}
		.line_base b{
			background-color: #0766FE;
		}
		.el-form-item--mini.el-form-item{
			margin-bottom: 10px;
		}
		.search_form_box{
			width: 280px;
			position: absolute;
			top:0.15rem;
			left:0.2rem;
			z-index: 100;
			background: #FFFFFF;
			box-shadow: 0px 2px 4px 0px rgb(223 223 223 / 50%);
			border-radius: 6px;
			border: 1px solid #ECECEC;
			padding:0.16rem 0.2rem;
		}
		.driving_form{
			right:4.4rem;
			left: auto;
		}
		.el-icon-close{
			position: absolute;
			top:0.2rem;
			right:0.2rem;
			z-index: 100;
			font-size: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="wrap"  v-cloak>
		<div class="search_form_box">
			<el-form ref="form" :model="form" label-width="70px" size="mini">
				<el-form-item label="行程ID:">
					<el-input disabled v-model="form.tid" ></el-input>
				</el-form-item>
				<el-form-item label="开始时间:" >
					<el-date-picker type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" v-model="form.startTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间:" >
					<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
				</el-form-item>
				<el-form-item style="margin-bottom: 0;">
					<el-button style="width:95%" @click="searchTripData" type="primary">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div @keyup="keyupPoi" id="container" tabindex="0"></div>
		<div class="wrap_right">
			<div class="form_box2">
				<div>
					<el-button @click="updateAbnormalType(101)" type="primary"  size="mini">已完成纠偏</el-button>
					<el-button @click="updateAbnormalType(102)" type="warning"  size="mini">暂无纠偏办法</el-button>
					<div style="margin: 0.15rem 0;">
						<el-button @click="updateAbnormalType(104)" type="success"  size="mini">无需纠偏</el-button>
						<el-button @click="drivingVisible=true" type="danger"  size="mini">路线规划</el-button>
					</div>
					<el-button onclick="satellite.show()" type="primary"  size="mini">显示卫星图层</el-button>
					<el-button onclick="satellite.hide()" type="primary"  size="mini">隐藏卫星图层</el-button>
				</div>
			</div>
			<div class="control_box2">
				<ul class="map_hint">
					<li class="hint_point hint_add">
						<b></b>
						<span>人工增加的点</span>
					</li>
					<li class="hint_point hint_action">
						<b></b>
						<span>轻量级纠偏的点</span>
					</li>
					<li class="hint_point hint_base">
						<b></b>
						<span>原始点</span>
					</li>
					<li class="hint_point hint_delete">
						<b></b>
						<span>用户删除临时点(半透明)</span>
					</li>
					<li class="hint_line line_action">
						<b></b>
						<span>轻量级纠偏的行驶轨迹</span>
					</li>
					<li class="hint_line line_base">
						<b></b>
						<span>原始的行驶轨迹</span>
					</li>
				</ul>
				<div style="margin-top: 0.1rem;">
					<el-button :disabled="handleDisabled" @click="handleTripContrast" type="primary"  size="mini">轨迹对比</el-button>
					<el-button :disabled="!handleDisabled" @click="handleClear" type="primary"  size="mini">取消对比</el-button>
				</div>
			</div>
			<div class="control_box2">
				<ul class="point_info">
					<li>操作点经度：{{checkedPoint.longitude}}</li>
					<li>操作点纬度：{{checkedPoint.latitude}}</li>
					<li>轨迹点经度：{{checkedRoutePoint.longitude}}</li>
					<li>轨迹点纬度：{{checkedRoutePoint.latitude}}</li>
					<li>速度：{{checkedRoutePoint.gpsSpeed}} km/h</li>
					<li>时间：{{checkedRoutePoint.deviceTime}}</li>
					<li>卫星数：{{checkedRoutePoint.satelliteCount}}</li>
				</ul>
				<div class="btn_group">
					<el-button :disabled="handleDisabled"  @click="handlePoint('plus')" size="mini" type="success">增加点</el-button>
					<el-button :disabled="handleDisabled" @click="handlePoint('delete')" size="mini" type="danger">删除点</el-button>
					<el-button :disabled="handleDisabled" @click="handlePoint('move')" size="mini" type="warning">移动点</el-button>
				</div>
				<div class="btn_group">
					<el-button :disabled="handleDisabled" @click="handleSubmit" size="mini" type="primary">提交所有操作</el-button>
				</div>
			</div>
		</div>
		<div class="search_form_box driving_form" v-show='drivingVisible'>
			<i class="el-icon-close" @click="drivingVisible=false"></i>
			<ul class="point_info">
				<li>开始点经度：{{drivingData.startData.longitude}}</li>
				<li>开始点纬度：{{drivingData.startData.latitude}}</li>
				<li>开始点速度：{{drivingData.startData.gpsSpeed}} km/h</li>
				<li>开始点时间：{{drivingData.startData.deviceTime}}</li>
				<li>开始点卫星数：{{drivingData.startData.satelliteCount}}</li>
				<li>结束点经度：{{drivingData.endData.longitude}}</li>
				<li>结束点纬度：{{drivingData.endData.latitude}}</li>
				<li>结束点速度：{{drivingData.endData.gpsSpeed}} km/h</li>
				<li>结束点时间：{{drivingData.endData.deviceTime}}</li>
				<li>结束点卫星数：{{drivingData.endData.satelliteCount}}</li>
			</ul>
			<div class="btn_group">
				<el-radio-group v-model="drivingRadio" size="small">
				    <el-radio-button label="开始点"></el-radio-button>
				    <el-radio-button label="结束点"></el-radio-button>
				</el-radio-group>
			</div>
			<div class="btn_group">
				<el-button  @click="handleSubmitDriving" size="mini" type="primary">提交</el-button>
			</div>
		</div>
	</div>
	
    <script type="text/javascript">
		var _this='';
		var myControl=new Vue({
		    el:".wrap",
		    data:{
				// globalUrl:"http://172.200.189.37:8800/manager",
				checkedMarkerIndex:-1,
				MarkersData:[],
				checkedPoint:{
					latitude:'',
					longitude:''
				},
				drivingRadio:'开始点',
				drivingData:{
					startData:{},
					endData:{}
				},
				checkedRoutePoint:{
					latitude:'',
					longitude:''
				},
				pathParam:[],		//轨迹
				allData:{},	//所有数据
				tripDetailVos:[],	//行程开始结束坐标	
				form:{
					startTime: '',
					endTime: '',
					tid:''
				},
				handleDisabled:false,
				drivingVisible:false,
				editPointData:{
					tripId:'',
					gpsData:[]
				},		//需要修改的数据集合
				submitIndex:0
		    },
		    methods:{
				//地图监听键盘按键
				keyupPoi(e){
					//a==65   d==68   m==77
					var keyCode=e.keyCode;
					if(keyCode==65){
						this.handlePoint('plus');
					}else if(keyCode==68){
						this.handlePoint('delete');
					}else if(keyCode==77){
						this.handlePoint('move');
					}
				},
				//点击轨迹对比按钮
				handleTripContrast(){
					this.handleDisabled=true;
					newLoadPath(this.allData.gpsData);
				},
				//点击轨迹取消对比按钮
				handleClear(){
					this.handleDisabled=false;
					this.searchTripData();
				},
				//点击路线规划的提交按钮   
				handleSubmitDriving(){
					if(!this.drivingData.startData.latitude){
						this.$message.error('抱歉，请选择要操作的开始点')
						return false
					}else if(!this.drivingData.endData.latitude){
						this.$message.error('抱歉，请选择要操作的结束点')
						return false
					}
					if(parseInt(this.drivingData.startData.id)>=parseInt(this.drivingData.endData.id)){
						this.$message.error('抱歉，开始点时间不能比结束点时间晚！')
						return false
					}
					var json={
						tripId:this.allData.tripId,
						gpsData:[
							
						]
					};
					let pathParam=this.pathParam.slice(this.drivingData.startData.id,this.drivingData.endData.id);
					pathParam.forEach((val,key)=>{
						// if(key>0&&key<(pathParam.length-1)){
							json.gpsData.push(val,{operateType:1})
						// }
					})
					// console.log(json)
					this.editPointData.gpsData=json.gpsData;
					//删除地图上的点
					deleteGpsPoint(json,'delete');
					//高德地图规划路线
					aMapDriving(pathParam);
				},
				//操作增加、删除、移动 poi点
				handlePoint(sign){
					if(!this.checkedPoint.latitude&&sign!='delete'){
						this.$message.error('抱歉，请选择要操作的GPS点')
						return false
					}
					if(sign=='plus'){
						if(!this.checkedRoutePoint.latitude){
							this.$message.error('抱歉，请选择要添加GPS点的上一个点')
							return false
						}else{
							this.handleAddPoint();
						}
					}else if(sign=='delete'){
						console.log(this.checkedRoutePoint);
						// return false  
						if(!this.checkedRoutePoint.latitude){
							this.$message.error('抱歉，请选择要删除的轨迹点')
							return false
						}else{
							var json={
								tripId:this.allData.tripId,
								gpsData:[
									
								]
							};
							this.pathParam.forEach((val,key)=>{
								if(this.checkedRoutePoint.latitude==val.latitude){
									json.gpsData.push(val,{operateType:1})
								}
							})
							console.log(json.gpsData)
							this.handleDeletePoint(json)
						}
					}else if(sign=='move'){
						if(!this.checkedRoutePoint.latitude){
							this.$message.error('抱歉，请选择要移动的轨迹点')
							return false
						}else{
							var json={
								tripId:this.allData.tripId,
								gpsData:[
									this.checkedRoutePoint,
									this.checkedPoint
								]
							};
							this.handleMovePoint(json)
						}
					}
					this.checkedPoint={
						latitude:'',
						longitude:''
					}
					if(sign!='plus'){
						this.checkedRoutePoint={
							latitude:'',
							longitude:''
						}
					}
				},
				//点击提交所有操作按钮
				handleSubmit(){
					if(this.editPointData.length==0){
						this.$message.error('抱歉，请选择您要操作的poi点！');
					}else{
						this.operateGpsList()
					}
				},
				//点击添加点按钮   
				handleAddPoint(){
					this.checkedPoint.operateType=0;
					this.editPointData.gpsData.push(this.checkedRoutePoint,this.checkedPoint);
					addGpsPoint();
				},
				//点击删除点按钮
				handleDeletePoint(json){
					this.editPointData.gpsData.push(...json.gpsData);
					deleteGpsPoint(json,'delete');
				},
				//点击移动点按钮
				handleMovePoint(json){
					this.checkedPoint.operateType=2;
					this.editPointData.gpsData.push(this.checkedRoutePoint,this.checkedPoint);
					addGpsPoint();
					deleteGpsPoint(json,'move');
				},
				//更新gps点
				operateGpsList(){
					$.ajax({
					    type: 'post',   //POST/PUT/DELETE/HEAD...
					    url:_this.globalUrl+"/correct/trip/operateGpsList",
					    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
					    data:JSON.stringify(_this.editPointData) ,
					    dataType: 'json',	//text/script/xml/json/jsonp
					    contentType:"application/json; charset=UTF-8",
					    success: function (data) {
							if(data.code==1){
								_this.editPointData.gpsData=[];
								_this.searchTripData();
							}
					    }
					});
				},
				//修改行程状态
				updateAbnormalType(abnormalType){
					var json={
						id:this.form.tid,
						abnormalType:abnormalType
					}
					$.ajax({
					    type: 'post',   //POST/PUT/DELETE/HEAD...
					    url:_this.globalUrl+"/correct/trip/updateAbnormalType",
					    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
					    data:JSON.stringify(json) ,
					    dataType: 'json',	//text/script/xml/json/jsonp
					    contentType:"application/json; charset=UTF-8",
					    success: function (data) {
							_this.$message(data.message)
							if(data.code==1){
								// location.reload();
							}
					    }
					});
				},
		        getData:function(){
					var startTime=getQueryString('startTime');
					var endTime=getQueryString('endTime');
					if(startTime){
						this.form.startTime=startTime;
						this.form.endTime=endTime;
					}
		            this.form.tid=getQueryString('plateNum');
					this.searchTripData();
		        },
				//点击搜索按钮，加载地图轨迹
				searchTripData(){
					this.checkedPoint={
						latitude:'',
						longitude:''
					}
					this.checkedRoutePoint={
						latitude:'',
						longitude:''
					}
					var json=JSON.parse(JSON.stringify(this.form));
					$.ajax({
					    type: 'get',   //POST/PUT/DELETE/HEAD...
					    url:_this.globalUrl+"/correct/trip/info/"+json.tid,
					    // beforeSend: function(request) { request.setRequestHeader("Authorization",serviceToken);  },
					    data:'',
					    dataType: 'json',	//text/script/xml/json/jsonp
					    // contentType:"application/json; charset=UTF-8",
					    success: function (data) {
							if(data.code==1){
								$.each(data.data.pointsData,function(key,val){
									val.gpsSpeed&&(val.gpsSpeed=val.gpsSpeed.toFixed(2))
								});
								$.each(data.data.gpsData,function(key,val){
									val.gpsSpeed&&(val.gpsSpeed=val.gpsSpeed.toFixed(2))
								});
								_this.pathParam=data.data.pointsData;
								_this.allData=data.data;
								_this.editPointData.tripId=_this.allData.tripId,
								newLoadPath(_this.pathParam,'first');
							}
					    }
					});
				}
		    },
		    mounted:function(){
				_this=this;
				this.getData();
				initialize();
				var change = function(inp) {		
				}
				$('.inp').RangeSlider({ min: 0,   max: 100,   callback: change});
		    }
		});
        
    </script>
</body>
</html>